<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件绑定</title>
    <style></style>
  </head>
  <body>
    <div id="root"></div>

    <hr />
    <h1>原生事件</h1>
    <button id="btn">点击</button><br/>
    <input type="text" id="input">
    <script>
      btn.onclick = function(e){
        console.log(e);
      }

      input.onchange = function(){
        console.log('原生 change 值变化了~~~');
      }
    </script>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      let clickCallback = () => {
        alert('外部声明的函数~~');
      }

      let clickCallback2 = () => {
        return () => {
          alert('我是返回的一个函数哦~~~');
        }
      }

      let obj = {
        fn: function(){
          alert('对象方法')
        }
      }

      //创建虚拟 DOM 对象
      let vdom = <div>
          <h2>react 事件绑定</h2>
          <hr />
          <button onClick={function(){
            alert('恭喜恭喜~~~');
          }}>点我抽奖</button>
          <button onClick={() => {
            alert('我是个箭头函数~~~');
          }}>点我抽奖</button>
          <button onClick={clickCallback}>外部声明的函数</button>
          <button onClick={clickCallback2()}>函数调用形式的事件绑定</button>

          <h2>事件源</h2>
          <hr />
          <div onClick={function(e){
            console.log(e.target.innerHTML);
          }}>我于杀戮之中盛放，亦如黎明中的花朵</div>

          <h2>阻止默认行为</h2>
          <hr />
          <a href="http://www.atguigu.com" onClick={(e) => {
            console.log(e);
            e.preventDefault();
          }}>尚硅谷</a>
          
          <h2>input onChange事件</h2>
          <input type="text" onChange={() => {
            console.log('内容变化了~~');
          }} />
        </div>

      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'));
    </script>
</body>
</html>
